<template>
  <div class="header">
    <div class="inner">
      <div class="title">提问标注工具-审核</div>
      <div class="tools">
        <el-button type="primary" @click="onSelect"> 打开 </el-button>
        <el-button type="warning" @click="onLabel"> 标注 </el-button>
      </div>
    </div>
    <el-divider style="margin: 0" />
  </div>
  <CheckFileDialog
    v-model:visible="fileCheckVisible"
    @success="handleSuccess"
  ></CheckFileDialog>
</template>

<script setup lang="ts">
import { IJsonDataContext } from "@/types/question";
import { ref } from "vue";
import CheckFileDialog from "./CheckFileDialog.vue";
import { useRouter } from "vue-router";

interface EmitType {
  (
    e: "success",
    value: {
      originJson: IJsonDataContext[];
      newJson: IJsonDataContext[];
    }
  ): void;
}
const emit = defineEmits<EmitType>();

const fileCheckVisible = ref(false);
const onSelect = async () => {
  fileCheckVisible.value = true;
};
const router = useRouter();
const onLabel = () => {
  router.push("/home/dashboard");
};

const handleSuccess = (value: {
  originJson: IJsonDataContext[];
  newJson: IJsonDataContext[];
}) => {
  fileCheckVisible.value = false;
  emit("success", value);
};

// const isJSON = (str: string) => {
//   if (typeof str !== "string") {
//     return false;
//   }

//   try {
//     const obj = JSON.parse(str);
//     if (typeof obj === "object" && obj) {
//       return true;
//     } else {
//       return false;
//     }
//   } catch (e) {
//     return false;
//   }
// };
// const onChange = () => {
//   const file = fileSelectRef.value?.files;
//   if (!file?.length) return;
//   const reader = new FileReader();
//   reader.onload = function () {
//     const content = reader.result as string;
//     if (isJSON(content)) {
//       const parseContent: IJsonItem[] = JSON.parse(content);
//       // debugger
//       const contexts: IContext[] = [];
//       parseContent.forEach((content) => {
//         if (
//           !contexts.find((e) => e.context_id === content.context.context_id)
//         ) {
//           contexts.push(content.context);
//         }
//       });
//       const json: IJsonDataContext[] = contexts.map((item) => {
//         return {
//           context_id: item.context_id,
//           context: item.context,
//           qaList: parseContent
//             .filter((e) => e.context.context_id === item.context_id)
//             .map((e) => {
//               return {
//                 question: e.question,
//                 answer: e.answer,
//                 question_type: e.question_type,
//               };
//             }),
//         };
//       });
//       emit("success", {
//         fileName: file[0].name,
//         contexts: json,
//       });
//       fileSelectRef.value!.value = "";
//     } else {
//       ElMessage.error("读取失败");
//     }
//   };
//   reader.readAsText(file[0], "UTF-8");
// };

// const onDownload = async () => {
//   await ElMessageBox.confirm("下载，是否继续?", "提示", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning",
//   });
//   const json = piniaStore.questionStore.json;
//   const result: IJsonItem[] = [];
//   json.forEach((item) => {
//     item.qaList.forEach((qa) => {
//       result.push({
//         id: 0,
//         question: qa.question,
//         question_type: qa.question_type,
//         answer: qa.answer,
//         context: {
//           context_id: item.context_id,
//           context: item.context,
//         },
//       });
//     });
//   });
//   result.forEach((item, index) => (item.id = index + 1));
//   const blob = new Blob([JSON.stringify(result)]);
//   const downloadElement = document.createElement("a");
//   const href = window.URL.createObjectURL(blob);
//   downloadElement.href = href;
//   downloadElement.download = `${
//     piniaStore.questionStore.currentFileName.split(".")[0]
//   }_question.json`;
//   document.body.appendChild(downloadElement);
//   downloadElement.click();
//   document.body.removeChild(downloadElement);
//   window.URL.revokeObjectURL(href);
// };
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 60px;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
  .tools {
    height: 60px;
  }

  .inner {
    width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    span {
      font-size: 14px;
      margin-right: 20px;
    }
  }
}
</style>
